<template>
  <div class="e-charts-line-view">
    <div class="charts-header" ref="chartsRef">
      <div class="line-chart" id="cardLine"></div>
    </div>
    <div class="echarts-setting">
      <van-cell-group>
        <van-switch-cell
          v-model="isDark"
          size="20px"
          title="深色模式："
          @change="setSwitchChange"
        />
        <van-switch-cell
          v-model="isGreen"
          size="20px"
          title="护眼模式："
          @change="setGreenChange"
        />
      </van-cell-group>
      <titleSetting :option="option" @titleEvent="titleEvent" ref="titleSetRef">
      </titleSetting>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import titleSetting from "./children/titleSetting.vue";
export default {
  name: "chartsLine",
  components: {
    titleSetting,
  },
  data() {
    return {
      option: {}, //e-chart 设置
      isDark: false, //主题是否是黑色
      isGreen: false, //护眼模式
    };
  },
  created() {},
  mounted() {
    var chartDom = document.getElementById("cardLine");
    this.myChart = echarts.init(chartDom);
    // this.myChart = echarts.init(chartDom, null , {height:100,width:100}); //可指定图表的宽高  参数2 为颜色主题:"dark" 暗色主题
    this.getChartsData();
    window.addEventListener("resize", () => {
      this.myChart.resize();
    }); //添加 resize 检测窗口大小事件
  },
  methods: {
    getChartsData() {
      let option = {
        title: {
          //标题
          show: true,
          text: "",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
          {
            data: [120, 130, 324, 268, 235, 247, 160],
            type: "line",
          },
        ],
      };
      this.option = option;
      option.title = this.$refs.titleSetRef.titleObj;
      option && this.myChart.setOption(option);
    },
    setSwitchChange() {
      this.myChart.dispose();
      delete this.option.backgroundColor;
      var chartDom = document.getElementById("cardLine");
      this.myChart = echarts.init(chartDom, this.isDark ? "dark" : null);
      this.myChart.setOption(this.option);
    },
    setGreenChange() {
      if (this.isGreen) {
        this.option.backgroundColor = "green";
      } else {
        this.option.backgroundColor = "";
      }
      this.myChart.setOption(this.option);
    },

    titleEvent(titleObj) {
      this.$set(this.option, "title", titleObj);

      this.myChart.setOption(this.option);
    },
  },
};
</script>

<style lang="scss">
.e-charts-line-view {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .charts-header {
    height: 30vh;
    background-color: #fff;
    .line-chart {
      height: 100%;
    }
  }
  .echarts-setting {
    flex: 1;
    overflow: auto;
    box-sizing: border-box;
    .theme-item {
      margin: 10px;
      .label {
        font-size: 12px;
        color: #444;
        vertical-align: super;
      }
    }
  }
}
</style>